{% extends "base.html" %}

{% block meta %}
    <meta name="menu-tag" content="{{menu_tag}}"/>
{% end block %}

{% block stylesheet %}
<style type="text/css">
    #env-container {
        margin: 0; 
        padding:0;
        overflow: hidden;
    }
</style>
{% end block %}

{% block main %}

<div>
    {% if error %}
    <div class="container">
        <div class="alert alert-danger">
            {{ error }}
        </div>
    </div>
    {% else %}
    <div class="container">
        <div class="alert alert-success" id="divInfo">
            <p><b>虚拟环境描述：</b>{{ env_info['envdesc'] }}</p>
            <p><b>镜像描述：</b>{{ env_info['imagedesc'] }}</p>
            <p><button class="btn btn-sm btn-primary" onclick="enterEnv();">进入虚拟环境</button></p>
        </div>
    </div>
    <div id="env-container">
        <iframe frameborder="0" scrolling="no" id="envframe"></iframe>
    </div>
        
    {% end if %}
</div>

{% end block %}

{% block script %}
<script>
    var envName = "{{env_info['envname']}}";
    var serviceName = "";
    var timer;
    var timer_count = 0;

    function showEnv(url){
        height = window.screen.availHeight;
        width = window.screen.availWidth - 250;
        // height = 1024;
        // width = 1280;
        $("#envframe").attr("height", height + ".px").attr('width', width + ".px");
        $("#envframe").attr("src", url);
    }

    function enterEnv(){
        var requestData = {
            operation : 'ensure_service',
            operand : {                
                envName : envName
            }
        };
        $.ajax({
            url : '/virtualenv',
            type : 'POST', 
            dataType : 'JSON',
            data : JSON.stringify(requestData),
            success : function(jsonResult){
                if (jsonResult.success){
                    serviceName = jsonResult.data.service_name;

                    if (jsonResult.data.url){           // 服务已经就绪
                        showEnv(jsonResult.data.url);
                        $("#divInfo").hide();
                    } else{                             // 服务已启动，但尚未就绪
                        $("<p>等待容器环境准备就绪......</p>").appendTo($("#divInfo"));

                        // 每隔5秒轮询一次
                        timer = setInterval(function(){
                            if (timer_count >= 11){          // 轮寻多次仍未启动成功，放弃
                                clearInterval(timer);
                                $("<p class='text text-danger'>容器环境长时间没有响应，请联系管理员</p>").appendTo($("#divInfo"));
                                return;
                            }

                            timer_count++;
                            var requestData2 = {
                                operation : 'check_env_ready',
                                operand : {
                                    serviceName : serviceName
                                }
                            };
                            $.ajax({
                                url : '/virtualenv',
                                type : 'POST',
                                dataType : 'JSON',
                                data : JSON.stringify(requestData2),
                                success : function(jsonResult2){
                                    if (jsonResult2.data.url){
                                        clearInterval(timer);
                                        showEnv(jsonResult2.data.url);
                                        $("#divInfo").hide();
                                        console.log(jsonResult2.data.url);
                                    } else{
                                        $("<p>等待虚拟环境准备就绪......</p>").appendTo($("#divInfo"));
                                    }
                                }
                            });
                        }, 5000)
                    }
                } else{
                    $("<p class='text text-danger'>" + jsonResult.message + "<p>").appendTo($("#divInfo"));
                }
            }
        });
    }

    
</script>
{% end block %}
